<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width">
    <title>在线视频</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
    <style>
        video {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<#--<video name="media" src="${"/app/video/${video}"}" autoplay controls muted id="video">-->
<#--    <source src="${"/app/video/${video}"}" type="video/mp4">-->
<#--    您的浏览器不支持 HTML5 video 标签。-->
<#--</video>-->

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
       poster="http://vjs.zencdn.net/v/oceans.png">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>
<script>
    // var player = videojs('example_video_1', {
    //     muted: true,
    //     controls: true / false,
    //     height: 300,
    //     width: 300,
    //     loop: true,
    //     // 更多配置.....
    // });

    var options = {};

    var player = videojs('example_video_1', options, function onPlayerReady() {
        videojs.log('播放器已经准备好了!');

        // In this context, `this` is the player that was created by Video.js.<br>  // 注意，这个地方的上下文， `this` 指向的是Video.js的实例对像player
        this.play();

        // How about an event listener?<br>  // 如何使用事件监听？
        this.on('ended', function () {
            videojs.log('播放结束了!');
        });
    });

</script>
</body>
</html>